<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" type="text/css" href="../css/reset.css">
	<link rel="stylesheet" type="text/css" href="../css/common-list.css">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
</head>
<body>
	<header>
		<div class="header-con">
			<a class="navbar-header" href="">
				<img src="../images/logo.png" alt="">
			</a>
			<ul>
				<li>
					<a href="">首页</a>
				</li>
				<li>
					<a href="">人资管理</a>
				</li>
				<li>
					<a href="">指标设置</a>
				</li>
				<li>
					<a href="">数据统计</a>
				</li>
				<li>
					<a href="">工作时设置</a>
				</li>
				<li>
					<a href="">财务管理</a>
				</li>
			</ul>
		</div>
		<div class="peo-message">
			<div class="peo-cir">
				<!-- <img src="" alt=""> -->
			</div>
			<em>黑披士</em>
			<span class="down-list"></span>
			<!-- <ul>
				<li>123</li>
			</ul> -->
		</div>
	</header>
	<div class="boxed clearfix">
		<div class="common-tit">
			<h2>人资数据</h2>
			<span>数据统计 > 人资数据</span>
			<div class="cours-gbtn">
				<div class="list-box">
					<div class="downbtn">
						<span>全部分店</span>
						<em></em>
					</div>
					<ul class="dropdown-menu">
						<li>测试测试</li>
						<li>我们</li>
						<li>测试测试测试</li>
						<li>asdfasdfsaf	</li>
					</ul>
				</div>
			</div>
		</div>
		<div class="global-data">
			<div class="com-statcon">
				<div class="com-statbox">
					<div class="com-statistics">
						<div>
							<h4>345</h4>
							<span>员工人数(人)</span>
						</div>
						<div>
							<h4>5982</h4>
							<span>男性员工(人)</span>
						</div>
						<div>
							<h4>5982</h4>
							<span>女性员工(人)</span>
						</div>
						<div>
							<h4>5982</h4>
							<span>离职人数(人)</span>
						</div>
					</div>
					<div class="com-statistics">
						<div>
							<h4>5982</h4>
							<span>市场总监(人)</span>
						</div>
						<div>
							<h4>5982</h4>
							<span>运营总监(人)</span>
						</div>
						<div>
							<h4>5982</h4>
							<span>产品总监(人)</span>
						</div>
						<div></div>
					</div>
					<div class="com-statistics">
						<div>
							<h4>5982</h4>
							<span>市场专员(人)</span>
						</div>
						<div>
							<h4>5982</h4>
							<span>服务顾问(人)</span>
						</div>
						<div>
							<h4>5982</h4>
							<span>前台(人)</span>
						</div>
						<div>
							<h4>5982</h4>
							<span>导师(人)</span>
						</div>
					</div>
				</div>
			</div>
			<div class="pdata-box clearfix">
				<div id="reSex"></div>
				<div id="rePos"></div>
			</div>
		</div>
	</div>
	<script src="../js/jquery-1.12.3.js"></script>
	<script src="../js/echarts.common.min.js"></script>
	<script src="../js/common-list.js"></script>
	<script>
		// 收入类型比
		var myChart1 = echarts.init(document.getElementById('reSex'));
		option1 = {
			title : {
		        text: '性别比',
		       	x:'14%'
		    },
			color : ['#3cf','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
		    tooltip : {
		        trigger: 'item',
		        formatter: "{a} <br/>{b} : {c} ({d}%)"
		    },
		    legend: {
		        x : 'center',
		        y : 'bottom',
		        data:['男性','女性']
		    },
		    toolbox: {
		        show : true,
		        feature : {
		            mark : {show: true},
		            // dataView : {show: true, readOnly: false},
		            magicType : {
		                show: true,
		                type: ['pie', 'funnel']
		            },
		            // restore : {show: true},
		            saveAsImage : {show: true}
		        }
		    },
		    calculable : true,
		    series : [
		        {
		            name:'半径模式',
		            type:'pie',
		            radius : [20, 140],
		            center : ['50%', '50%'],
		            roseType : 'radius',
		           	lableLine: {
		                normal: {
		                    show: false
		                },
		                emphasis: {
		                    show: true
		                }
		            },
		            data:[
		                {value:10, name:'男性'},
		                {value:5, name:'女性'}
		            ]
		        }
		    ]
		};
		myChart1.setOption(option1);

		//支出类型比
		var myChart2 = echarts.init(document.getElementById('rePos'));
		option2 = {
			title : {
		        text: '离职比',
		       	x:'14%'
		    },
			color : ['#3cf','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
		    tooltip : {
		        trigger: 'item',
		        formatter: "{a} <br/>{b} : {c} ({d}%)"
		    },
		    legend: {
		        x : 'center',
		        y : 'bottom',
		        data:['市场总监','市场专员','运营总监','服务顾问','前台','产品总监','导师']
		    },
		    toolbox: {
		        show : true,
		        feature : {
		            mark : {show: true},
		            // dataView : {show: true, readOnly: false},
		            magicType : {
		                show: true,
		                type: ['pie', 'funnel']
		            },
		            // restore : {show: true},
		            saveAsImage : {show: true}
		        }
		    },
		    calculable : true,
		    series : [
		        {
		            name:'半径模式',
		            type:'pie',
		            radius : [20, 140],
		            center : ['50%', '50%'],
		            roseType : 'radius',
		           	lableLine: {
		                normal: {
		                    show: false
		                },
		                emphasis: {
		                    show: true
		                }
		            },
		            data:[
		                {value:10, name:'市场总监'},
		                {value:5, name:'市场专员'},
		                {value:15, name:'运营总监'},
		                {value:7, name:'服务顾问'},
		                {value:12, name:'前台'},
		                {value:9, name:'产品总监'},
		                {value:21, name:'导师'}
		            ]
		        }
		    ]
		};
		myChart2.setOption(option2);
	</script>
</body>
</html>